<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>简历分析报告</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/boxicons@2.0.7/css/boxicons.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        :root {
            --primary-color: #2962ff;
            --secondary-color: #0d47a1;
            --bg-gradient: linear-gradient(135deg, #1e88e5, #1565c0);
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .report-container {
            max-width: 1200px;
            margin: 2rem auto;
            padding: 2rem;
        }
        
        .report-header {
            background: var(--bg-gradient);
            color: white;
            padding: 2rem;
            border-radius: 15px;
            margin-bottom: 2rem;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .report-section {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 2px 15px rgba(0,0,0,0.05);
            transition: transform 0.3s ease;
        }
        
        .report-section:hover {
            transform: translateY(-5px);
        }
        
        .section-title {
            color: var(--primary-color);
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 0.5rem;
            font-size: 1.8rem;
        }
        
        .score-circle {
            width: 120px;
            height: 120px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            font-weight: bold;
            color: white;
            margin: 1rem auto;
            background: conic-gradient(var(--primary-color) var(--percentage), #e0e0e0 var(--percentage));
        }
        
        .progress {
            height: 1rem;
            border-radius: 0.5rem;
            margin: 1rem 0;
        }
        
        .chart-container {
            height: 300px;
            margin: 1rem 0;
        }
        
        .grade-badge {
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.2rem;
        }
        
        .grade-s { background-color: #00c853; color: white; }
        .grade-a { background-color: #2196f3; color: white; }
        .grade-b { background-color: #ff9800; color: white; }
        .grade-c { background-color: #ff5722; color: white; }
        .grade-d { background-color: #f44336; color: white; }
        
        .skill-tag {
            background: #e3f2fd;
            color: var(--primary-color);
            padding: 0.5rem 1rem;
            border-radius: 50px;
            margin: 0.25rem;
            display: inline-block;
        }

        .suggestion-card {
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            margin-bottom: 1rem;
        }

        .path-steps {
            background: #e3f2fd;
            padding: 1rem;
            border-radius: 8px;
            margin: 1rem 0;
            font-weight: 500;
        }
    </style>
</head>
<body>
    <div class="report-container">
        <div class="report-header text-center">
            <h1 class="display-4 mb-3">简历分析报告</h1>
            <p class="lead mb-0">AI智能分析，助力职业发展</p>
        </div>
        
        <div id="reportContainer">
            <!-- 内容将通过JavaScript动态加载 -->
        </div>
    </div>

    <script>
        // 渲染雷达图
        function renderRadarChart(container, data) {
            const chart = echarts.init(document.getElementById(container));
            const option = {
                radar: {
                    indicator: [
                        { name: '技术能力', max: 10 },
                        { name: '项目经验', max: 10 },
                        { name: '软技能', max: 10 },
                        { name: '教育背景', max: 10 },
                        { name: '发展潜力', max: 10 }
                    ],
                    shape: 'circle',
                    splitNumber: 5,
                    axisName: {
                        color: '#333'
                    }
                },
                series: [{
                    type: 'radar',
                    data: [{
                        value: [
                            data.technical_skills.score,
                            data.project_experience.score,
                            data.soft_skills.score,
                            data.education_match,
                            data.potential_match
                        ],
                        name: '能力评分',
                        areaStyle: {
                            color: 'rgba(41, 98, 255, 0.2)'
                        },
                        lineStyle: {
                            color: '#2962ff'
                        },
                        itemStyle: {
                            color: '#2962ff'
                        }
                    }]
                }]
            };
            chart.setOption(option);
        }

        // 获取报告数据并渲染
        fetch('/api/resume_report')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    try {
                        const report = typeof data.report === 'string' ? JSON.parse(data.report) : data.report;
                        const reportContainer = document.getElementById('reportContainer');

                        // 渲染评估元数据
                        const metadataHtml = `
                            <div class="report-section">
                                <div class="section-title">
                                    <i class='bx bx-info-circle'></i>评估元数据
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <p><i class='bx bx-calendar'></i> <strong>评估日期：</strong>${report.assessment_metadata.assessment_date}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><i class='bx bx-chip'></i> <strong>评估模型：</strong>${report.assessment_metadata.assessment_model}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p><i class='bx bx-building'></i> <strong>行业基准：</strong>${report.assessment_metadata.industry_benchmark}</p>
                                    </div>
                                </div>
                            </div>
                        `;
                        reportContainer.innerHTML = metadataHtml;

                        // 渲染总体评分
                        const score = report.overall_evaluation.total_score.score;
                        const percentage = (score / 10) * 100;
                        const gradeClass = `grade-${report.overall_evaluation.total_score.grade.charAt(0).toLowerCase()}`;
                        
                        const overallHtml = `
                            <div class="report-section">
                                <div class="section-title">
                                    <i class='bx bx-bar-chart-alt-2'></i>总体评分
                                </div>
                                <div class="row align-items-center">
                                    <div class="col-md-4 text-center">
                                        <div class="score-circle" style="--percentage: ${percentage}%">
                                            <div class="score-inner">${score}</div>
                                        </div>
                                        <span class="grade-badge ${gradeClass} mt-3">
                                            ${report.overall_evaluation.total_score.grade}
                                        </span>
                                    </div>
                                    <div class="col-md-8">
                                        <p class="lead">${report.overall_evaluation.total_score.conclusion}</p>
                                        <div class="dimension-scores mt-4">
                                            <div class="mb-3">
                                                <label>技术能力匹配度</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-primary" 
                                                         role="progressbar" 
                                                         style="width: ${report.overall_evaluation.dimension_scores.technical_match * 10}%" 
                                                         aria-valuenow="${report.overall_evaluation.dimension_scores.technical_match}" 
                                                         aria-valuemin="0" 
                                                         aria-valuemax="10">
                                                        ${report.overall_evaluation.dimension_scores.technical_match}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label>经验匹配度</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-success" 
                                                         style="width: ${report.overall_evaluation.dimension_scores.experience_match * 10}%">
                                                        ${report.overall_evaluation.dimension_scores.experience_match}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label>教育背景匹配度</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" 
                                                         style="width: ${report.overall_evaluation.dimension_scores.education_match * 10}%">
                                                        ${report.overall_evaluation.dimension_scores.education_match}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-3">
                                                <label>发展潜力匹配度</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-warning" 
                                                         style="width: ${report.overall_evaluation.dimension_scores.potential_match * 10}%">
                                                        ${report.overall_evaluation.dimension_scores.potential_match}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="chart-container mt-4" id="radarChart"></div>
                            </div>
                        `;
                        reportContainer.innerHTML += overallHtml;

                        // 渲染能力分析
                        const competencyHtml = `
                            <div class="report-section">
                                <div class="section-title">
                                    <i class='bx bx-brain'></i>能力分析
                                </div>
                                <div class="row">
                                    <div class="col-md-4">
                                        <h5>技术能力</h5>
                                        <div class="progress mb-3">
                                            <div class="progress-bar bg-success" 
                                                 style="width: ${report.competency_analysis.technical_skills.score * 10}%">
                                                ${report.competency_analysis.technical_skills.score}
                                            </div>
                                        </div>
                                        <div class="strengths mt-3">
                                            <h6><i class='bx bx-up-arrow-alt'></i> 优势</h6>
                                            ${report.competency_analysis.technical_skills.strengths.map(s => 
                                                `<span class="skill-tag">${s}</span>`).join('')}
                                        </div>
                                        <div class="weaknesses mt-3">
                                            <h6><i class='bx bx-down-arrow-alt'></i> 不足</h6>
                                            ${report.competency_analysis.technical_skills.weaknesses.map(w => 
                                                `<span class="skill-tag">${w}</span>`).join('')}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h5>项目经验</h5>
                                        <div class="progress mb-3">
                                            <div class="progress-bar bg-info" 
                                                 style="width: ${report.competency_analysis.project_experience.score * 10}%">
                                                ${report.competency_analysis.project_experience.score}
                                            </div>
                                        </div>
                                        <div class="key-projects mt-3">
                                            <h6><i class='bx bx-code-alt'></i> 关键项目</h6>
                                            ${report.competency_analysis.project_experience.key_projects.map(p => `
                                                <div class="project-card mb-2">
                                                    <strong>${p.project_name}</strong>
                                                    <div class="text-muted">相关度: ${p.relevance}</div>
                                                    <small>${p.highlight}</small>
                                                </div>
                                            `).join('')}
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <h5>软技能</h5>
                                        <div class="progress mb-3">
                                            <div class="progress-bar bg-warning" 
                                                 style="width: ${report.competency_analysis.soft_skills.score * 10}%">
                                                ${report.competency_analysis.soft_skills.score}
                                            </div>
                                        </div>
                                        <div class="soft-skills-details">
                                            <div class="mb-2">
                                                <label>领导力</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" 
                                                         style="width: ${report.competency_analysis.soft_skills.leadership * 10}%">
                                                        ${report.competency_analysis.soft_skills.leadership}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-2">
                                                <label>沟通能力</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" 
                                                         style="width: ${report.competency_analysis.soft_skills.communication * 10}%">
                                                        ${report.competency_analysis.soft_skills.communication}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="mb-2">
                                                <label>团队协作</label>
                                                <div class="progress">
                                                    <div class="progress-bar bg-info" 
                                                         style="width: ${report.competency_analysis.soft_skills.teamwork * 10}%">
                                                        ${report.competency_analysis.soft_skills.teamwork}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        reportContainer.innerHTML += competencyHtml;

                        // 渲染薪资分析
                        const salaryHtml = `
                            <div class="report-section">
                                <div class="section-title">
                                    <i class='bx bx-money'></i>薪资分析
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">市场定位</h5>
                                                <p><strong>当前薪资范围：</strong>${report.salary_analysis.market_position.current_range}</p>
                                                <p><strong>市场薪资范围：</strong>${report.salary_analysis.market_position.market_range}</p>
                                                <p><strong>市场水平：</strong>${report.salary_analysis.market_position.position_percentage}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card">
                                            <div class="card-body">
                                                <h5 class="card-title">薪资建议</h5>
                                                <p><strong>期望薪资合理度：</strong>${report.salary_analysis.expectation_analysis.expectation_reasonability}</p>
                                                <p><strong>建议基础工资：</strong>${report.salary_analysis.compensation_structure.base_salary}</p>
                                                <p><strong>其他福利：</strong>${report.salary_analysis.compensation_structure.other_benefits.join(', ')}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        reportContainer.innerHTML += salaryHtml;

                        // 渲染发展建议
                        const developmentHtml = `
                            <div class="report-section">
                                <div class="section-title">
                                    <i class='bx bx-trending-up'></i>发展建议
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <h5><i class='bx bx-time'></i> 短期建议</h5>
                                        ${report.development_suggestions.short_term.map(s => `
                                            <div class="suggestion-card mb-3">
                                                <div class="d-flex justify-content-between">
                                                    <h6>${s.aspect}</h6>
                                                    <span class="badge bg-${s.priority === '高' ? 'danger' : 'warning'}">${s.priority}</span>
                                                </div>
                                                <ul class="mt-2">
                                                    ${s.specific_actions.map(a => `<li>${a}</li>`).join('')}
                                                </ul>
                                            </div>
                                        `).join('')}
                                    </div>
                                    <div class="col-md-6">
                                        <h5><i class='bx bx-calendar'></i> 长期发展</h5>
                                        <div class="career-path mb-3">
                                            <h6>职业发展路径</h6>
                                            <div class="path-steps">
                                                ${report.development_suggestions.long_term.career_path.join(' → ')}
                                            </div>
                                        </div>
                                        <div class="milestones">
                                            <h6>关键里程碑</h6>
                                            <ul>
                                                ${report.development_suggestions.long_term.key_milestones.map(m => `<li>${m}</li>`).join('')}
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        `;
                        reportContainer.innerHTML += developmentHtml;

                        // 初始化雷达图
                        renderRadarChart('radarChart', {
                            technical_skills: report.competency_analysis.technical_skills,
                            project_experience: report.competency_analysis.project_experience,
                            soft_skills: report.competency_analysis.soft_skills,
                            education_match: report.overall_evaluation.dimension_scores.education_match,
                            potential_match: report.overall_evaluation.dimension_scores.potential_match
                        });

                    } catch (error) {
                        console.error('JSON解析错误:', error);
                        console.error('原始数据:', data.report);
                        alert('解析报告数据时出错');
                    }
                } else {
                    alert('获取报告失败: ' + data.message);
                }
            })
            .catch(error => {
                console.error('获取报告时出错:', error);
                alert('获取报告时出错');
            });
    </script>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
    
    <!-- 添加投递岗位按钮，只对应聘者用户显示 -->
    <div id="submitButtonContainer" class="container text-center mt-4 mb-5" style="display: none;">
        <a href="/applicant/upload_resume" class="btn btn-primary btn-lg px-5 py-3" style="background-color: var(--primary-color); border-color: var(--primary-color); font-size: 1.2rem; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);">
            <i class='bx bx-send me-2'></i>去投递岗位
        </a>
    </div>

    <script>
        // 检查当前用户角色，只有应聘者才显示投递按钮
        fetch('/check_role')
            .then(response => response.json())
            .then(data => {
                // 仅当用户角色为applicant时显示按钮
                if (data.role === 'applicant') {
                    document.getElementById('submitButtonContainer').style.display = 'block';
                }
            })
            .catch(error => {
                console.error('获取用户角色失败:', error);
                // 即使API调用失败，也保持按钮隐藏状态，对公司用户安全
            });
    </script>
</body>
</html>